<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>引出生命周期-生命周期钩子</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- opacity: opacity简写 -->
        <h1 :style="{opacity}">欢迎学习Vue</h1>
    </div>
   <script type="text/javascript">
    new Vue({
        el:'#root',
        data: {
            opacity: 1
        },
        beforeCreate() {
            console.log("beforeCreate");
        },
        created() {
            console.log("created............");
        },
        beforeMount() {
            console.log("beforeMount");
        },
        // vue完成模板解析 并把真实dom挂载到页面后执行
        mounted() {
            this.change()
        },
        beforeUpdate() {
            console.log("beforeUpdate");
        },
        updated() {
            console.log("updated");
            
        },
        // this.$destroy() 销毁

        beforeDestroy() {
            
        },
        destroyed() {
            
        },


        methods: {
            change() {
                setInterval(()=>{
                    this.opacity -= 0.01
                    if(this.opacity <= 0) {
                        this.opacity = 1
                    }
                },16);
            }
        },
    })
   </script>
</body>
</html>